<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层级选择器</title>
    <script src="../../js/jquery-3.3.1.js"></script>
    <style>
        * {
        }
    </style>
</head>
<body>


<div>
    <h1>你好世界</h1>
    <h2>你好世界</h2>
    <hr>
    <p>
        <span>今天是个好日子</span>
    </p>
    <span>明天也是一个好日子</span>

    <hr>
    <div id="my_div">
        <span id="a_number1">点击去百度</span>
        <p>这个是测试</p>
        <hr>
        <ul>
            <li>刘备</li>
            <li>关羽</li>
            <li>张飞</li>
        </ul>
        <span id="a_number2">点击去google</span>
        <ul>
            <li>唱</li>
            <li>跳</li>
            <li>rap</li>
        </ul>
    </div>

</div>

<script>
    /**
     * 祖先选择器（后代选择器）
     * 格式：祖先（空格）后代
     */
    $("div h2").css("color", "green")

    /**
     * 父子选择器（parent > child）：选择所有指定“parent”元素中指定的"child"的直接子元素
     */
    jQuery("p>span").css("font-size", "30px")

    /**
     * 兄弟选择器 ，下一个(节点)的兄弟
     */
    $('#a_number1+p').css("font-size", "30px")


    /**
     * 兄弟选择器 ，后面所有(节点)的兄弟
     */
    $('#a_number2~ul>li').css("color", "red")

</script>
</body>
</html>

<!--总结
层级选择器
1.父子,格式：父>子
2.祖先，格式：祖先&nbsp;后代
3.兄弟，下一个节点的兄弟：a+b
4.兄弟，下一个所有节点的兄弟：a~b
-->